import React from 'react'
import styles from './index.less'
import Item from '@/components/lib/Item'
import InputColor from '@/components/lib/InputColor'
import { useCanvasContext } from '@/store/hooks'
import { isTextComponent } from '@/constants'
export default function EditCmp() {
	const canvas = useCanvasContext()
	const selectedCmp = canvas.getSelectedCmp()
	const { value, style } = selectedCmp
	const handleStyleChange = (e, { name, value }) => {
		canvas.updateSelectedCmp({ [name]: value })
		canvas.recordCanvasChangeHistory()
	}
	const handleValueChange = e => {
		canvas.updateSelectedCmp({}, e.target.value)
		canvas.recordCanvasChangeHistory()
	}
	// 获取对齐页面所需的参数
	const canvasData = canvas.getCanvas()
	const canvasWidth = canvasData.style.width
	const selectCmpWidth = selectedCmp.style.width
	return (
		<div className={styles.main}>
			{selectedCmp.type !== isTextComponent && (
				<Item label="描述: ">
					<input type="text" value={value} onChange={handleValueChange} />
				</Item>
			)}
			{/* todo 后续改为多选 */}
			{/* 字体样式 默认样式：serif sans-serif monospace cursive fantasy */}
			{style.fontFamily !== undefined && (
				<Item label="字体">
					<select
						value={style.fontFamily}
						onChange={e =>
							handleStyleChange(e, {
								name: 'fontFamily',
								value: e.target.value,
							})
						}
					>
						<option value="serif">serif</option>
						<option value="sans-serif">sans-serif</option>
						<option value="monospace">monospace</option>
						<option value="cursive">cursive</option>
						<option value="fantasy">fantasy</option>
					</select>
				</Item>
			)}
			{/* 字体大小 */}
			{style.fontSize !== undefined && (
				<Item label="字体大小">
					<input
						type="number"
						value={style.fontSize}
						onChange={e =>
							handleStyleChange(e, {
								name: 'fontSize',
								value: e.target.value - 0,
							})
						}
					></input>
				</Item>
			)}
			{/* 字体粗细 */}
			{style.fontWeight !== undefined && (
				<Item label="字体粗细">
					<select
						value={style.fontWeight}
						onChange={e =>
							handleStyleChange(e, {
								name: 'fontWeight',
								value: e.target.value,
							})
						}
					>
						<option value="normal">normal</option>
						<option value="bold">bold</option>
						<option value="lighter">lighter</option>
						<option value="bolder">bolder</option>
					</select>
				</Item>
			)}
			{/* 行高 */}
			{style.lineHeight !== undefined && (
				<Item label="行高：">
					<input
						type="number"
						value={parseFloat(style.lineHeight)}
						onChange={e =>
							handleStyleChange(e, {
								name: 'lineHeight',
								value: e.target.value + 'px',
							})
						}
					></input>
				</Item>
			)}
			{/* 文本对齐 */}
			{style.textAlign !== undefined && (
				<Item label="对齐: ">
					<select
						className={styles.itemRight}
						value={style.textAlign}
						onChange={e => {
							handleStyleChange(e, {
								name: 'textAlign',
								value: e.target.value,
							})
						}}
					>
						<option value="left">居左</option>
						<option value="center">居中</option>
						<option value="right">居右</option>
					</select>
				</Item>
			)}
			{/* 对齐页面 共有属性 */}
			<Item label="对齐页面: ">
				<select
					className={styles.itemRight}
					value={
						style.left === 0
							? 'left'
							: style.left === canvasWidth / 2 - selectCmpWidth / 2
							? 'center'
							: style.left === canvasWidth - selectCmpWidth
							? 'right'
							: 'default'
					}
					onChange={e => {
						const newValue = e.target.value
						let newLeft = 0

						if (newValue !== 'left') {
							if (newValue === 'center') {
								newLeft = canvasWidth / 2 - selectCmpWidth / 2
							} else if (newValue === 'right') {
								newLeft = canvasWidth - selectCmpWidth
							}
						}
						handleStyleChange(e, { name: 'left', value: newLeft })
					}}
				>
					<option value="default">--选择--</option>
					<option value="left">居左</option>
					<option value="center">居中</option>
					<option value="right">居右</option>
				</select>
			</Item>
			{/* 旋转 */}
			{style.transform !== undefined && (
				<Item label="旋转: ">
					<input
						className={styles.itemRight}
						type="number"
						value={style.transform}
						onChange={e =>
							handleStyleChange(e, {
								name: 'transform',
								value: e.target.value,
							})
						}
					/>
				</Item>
			)}
			{/* 圆角 */}
			{style.borderRadius !== undefined && (
				<Item label="圆角: ">
					<input
						className={styles.itemRight}
						type="text"
						value={style.borderRadius}
						onChange={e =>
							handleStyleChange(e, {
								name: 'borderRadius',
								value: e.target.value,
							})
						}
					/>
				</Item>
			)}
			{/* 共有属性，边框样式 */}
			<Item label="边框样式: ">
				<select
					className={styles.itemRight}
					value={style.borderStyle}
					onChange={e => {
						handleStyleChange(e, {
							name: 'borderStyle',
							value: e.target.value,
						})
					}}
				>
					<option value="none">none</option>
					<option value="dashed">dashed</option>
					<option value="dotted">dotted</option>
					<option value="double">double</option>
					<option value="groove">groove</option>
					<option value="hidden">hidden</option>
					<option value="solid">solid</option>
				</select>
			</Item>
			{/* 共有属性，边框宽度 */}
			<Item label="边框宽度: ">
				<input
					className={styles.itemRight}
					type="number"
					value={style.borderWidth}
					onChange={e =>
						handleStyleChange(e, {
							name: 'borderWidth',
							value: e.target.value - 0,
						})
					}
				/>
			</Item>
			{/* 共有属性 边框颜色*/}
			<Item label="边框颜色: ">
				<InputColor
					color={style.borderColor || '#ffffff00'}
					onChangeComplete={e =>
						handleStyleChange(null, {
							name: 'borderColor',
							value: `rgba(${Object.values(e.rgb).join(',')})`,
						})
					}
				/>
			</Item>
			{/* 字体颜色 */}
			{style.color !== undefined && (
				<Item label="字体颜色: ">
					<InputColor
						color={style.color}
						onChangeComplete={e =>
							handleStyleChange(null, {
								name: 'color',
								value: `rgba(${Object.values(e.rgb).join(',')})`,
							})
						}
					/>
				</Item>
			)}
			{/* 背景颜色 */}
			{style.backgroundColor !== undefined && (
				<Item label="背景颜色: ">
					<InputColor
						color={style.backgroundColor}
						onChangeComplete={e => {
							handleStyleChange(null, {
								name: 'backgroundColor',
								value: `rgba(${Object.values(e.rgb).join(',')})`,
							})
						}}
					/>
				</Item>
			)}
		</div>
	)
}
